<template>
  <div>
    <el-dialog title="保存映射" width="35%" :visible="visible" @update:visible="updateVisible"
               :close-on-click-modal="false">
      <el-form :model="mappingForm" label-position="left" label-width="100px" ref="mappingForm"
               :rules="mappingFormRules">
        <el-form-item label="映射名称" prop="name">
          <el-input v-model="mappingForm.name" autocomplete="off" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input type="textarea" v-model="mappingForm.description" autocomplete="off" maxlength="200"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateVisible(false)">取 消</el-button>
        <el-button type="primary" @click="saveMapping('mappingForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {saveMappingApi} from '@/api/api'

export default {
  name: "SaveMapping",
  props: ['visible', 'id', 'table'],
  data() {
    return {
      mappingForm: {
        name: "",
        description: ""
      },
      mappingFormRules: {
        name: [
          {required: true, message: '请输入映射名称', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    /*保存映射规则*/
    async saveMapping(mappingForm) {
      this.$refs[mappingForm].validate(async valid => {
        if (valid) {
          let resp = await saveMappingApi({
            mapping: JSON.stringify(this.table),
            name: this.mappingForm.name,
            description: this.mappingForm.description,
            dataSourceId: this.id,
            createUser: this.$store.state.user.userId
          })
          this.$message({message: resp, type: 'success'})
          this.updateVisible(false)
        }
      })
    },
    /*更新弹框状态 */
    updateVisible(val) {
      this.$refs.mappingForm.resetFields()
      this.$emit('update:visible', val)
    },
  }
}
</script>

<style scoped>

</style>
